import { Form, Input, Select, InputNumber, Button, Radio, Checkbox, Modal } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;

@Form.create()
export default class PhaseForm extends React.Component {
  state = {};

  componentWillReceiveProps = nextProps => {
    if (!this.state.gameMethod && nextProps.curData) {
      this.setState({
        gameMethod: nextProps.curData && nextProps.curData.gameMethod,
      });
    }
  };

  okHandle = () => {
    const { handleAdd, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleAdd(fieldsValue);
      form.resetFields();
      this.setState({ gameMethod: null });
    });
  };

  getTitle = () => {
    const { curData } = this.props;
    if (curData) {
      return '修改阶段';
    } else {
      return '添加阶段';
    }
  };

  gameMethodChange = value => {
    this.setState({
      gameMethod: value.target.value,
    });
    console.log(this.state.gameMethod);
  };

  //此处逻辑是错的，暂未使用，须把signMax没有传过来改成组别的最到报名人数
  maxSeedCheck = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value > form.getFieldValue('signMax') / 4) {
      callback('种子数最多为最大参赛人数的1/4');
    } else {
      callback();
    }
  };

  showOtherWin = () => {
    const { form, curData } = this.props;
    return (
      <div>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="阶段出线人数"
          extra="最少4名，最多为分组人数的四分之一。只有在有下阶段是设置，否则设置无效。"
        >
          {form.getFieldDecorator('perFenzuWins', {
            rules: [],
            initialValue: curData && curData.perFenzuWins,
          })(
            <InputNumber
              disabled={curData && curData.zubieStatus !== 'NEW'}
              style={{ width: '100%' }}
              min={4}
              max={256}
            />
          )}
        </FormItem>
      </div>
    );
  };

  showCycleWin = () => {
    const { form, curData } = this.props;
    return (
      <div>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="每小组人数"
          extra="如果是分组比赛请设置..., 最多设置为6，最少为3"
        >
          {form.getFieldDecorator('perFenzuCount', {
            initialValue: curData && curData.perFenzuCount,
          })(
            <InputNumber
              disabled={curData && curData.zubieStatus !== 'NEW'}
              style={{ width: '100%' }}
              min={3}
              max={6}
              placeholder="请输入每小组人数"
            />
          )}
        </FormItem>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="每小组出线人数"
          extra="最少1名，最多为2人"
        >
          {form.getFieldDecorator('perFenzuWins', {
            initialValue: curData && curData.perFenzuWins,
          })(
            <InputNumber
              disabled={curData && curData.zubieStatus !== 'NEW'}
              style={{ width: '100%' }}
              min={1}
              max={2}
              placeholder="请输入每小组出线人数"
            />
          )}
        </FormItem>
      </div>
    );
  };

  generateGameMethodDesc = value => {
    const { curData } = this.props;
    let gameMethod = 'CO';
    if (value) {
      gameMethod = value;
    } else if (curData) {
      gameMethod = curData.gameMethod;
    }
    let desc;
    switch (gameMethod) {
      case 'FENZU':
        desc = '分组循环：所有参赛选手分成N个小组进行循环赛，选出淘进入汰赛选手';
        break;
      case 'CYCLE':
        desc = '循环赛：所有参赛选手在同一个小组进行循环赛，按胜场、胜次、净胜分决定名次';
        break;
      case 'OUT':
        desc =
          '淘汰赛：所有选手抽签进行比赛，胜者进级，败者淘汰。可以一直到决出冠亚军，也可以通过设置【阶段出线人数】来选出晋级选手';
        break;
      case 'SCORE':
        desc =
          '积分循环：所有参赛选手循环比赛，每两个选手对战一场，按得胜局、胜次、净胜分排名，可以通过设置【阶段出线人数】来选出晋级选手';
        break;
    }
    return desc;
  };
  //此处逻辑是错的，暂未使用，须把perFenzuCount改成组别的最到报名人数
  perFenzuWins = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value > form.getFieldValue('perFenzuCount') / 4) {
      callback('出线人数最多为分组人数的1/4');
    } else {
      callback();
    }
  };

  render() {
    const { modalVisible, handleModalVisible, curData, zubieCode, form } = this.props;

    return (
      <Modal
        title={this.getTitle()}
        width={1000}
        visible={modalVisible}
        destroyOnClose={true}
        onOk={this.okHandle}
        onCancel={() => {
          this.setState({ gameMethod: null });
          handleModalVisible();
        }}
      >
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="阶段序号"
          extra="第一阶段必须为1，将按此序号依次进行各阶段比赛"
        >
          {form.getFieldDecorator('seq', {
            rules: [{ required: true, message: '序号' }],
            initialValue: curData && curData.seq,
          })(
            <InputNumber
              disabled={curData && curData.zubieStatus !== 'NEW'}
              style={{ width: '100%' }}
              min={1}
              max={5}
              placeholder="请输入序号"
            />
          )}
        </FormItem>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="阶段名称"
          extra="改一个直观的名称"
        >
          {form.getFieldDecorator('name', {
            rules: [{ required: true }],
            initialValue: curData && curData.name,
          })(<Input placeholder="请输入阶段名称" />)}
        </FormItem>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="比赛方法"
          extra={this.generateGameMethodDesc(this.state.gameMethod)}
        >
          {form.getFieldDecorator('gameMethod', {
            rules: [{ required: true }],
            initialValue: curData && curData.gameMethod,
          })(
            <RadioGroup
              disabled={curData && curData.zubieStatus !== 'NEW'}
              onChange={this.gameMethodChange}
            >
              <Radio value="FENZU">分组循环</Radio>
              <Radio value="OUT">淘汰赛</Radio>
              <Radio value="CYCLE">循环赛</Radio>
            </RadioGroup>
          )}
        </FormItem>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="种子数"
          extra="从名单第一开始取设置数据的参赛人员为种，进入不同的1/2区，1/4区,1/8区..., 最多设置最大参数人数1/4数量的种子"
        >
          {form.getFieldDecorator('seedCount', {
            initialValue: curData && curData.seedCount,
          })(<InputNumber style={{ width: '100%' }} min={0} max={16} placeholder="请输入种子数" />)}
        </FormItem>
        <FormItem
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 15 }}
          label="入位方式"
          extra="第一个阶段设置无效，抽签表示此阶段开始前必须抽签入位，如果阶段为淘汰赛可选择交叉方式自动入位"
        >
          {form.getFieldDecorator('riseMethod', {
            rules: [{ required: true }],
            initialValue: curData && curData.riseMethod,
          })(
            this.state.gameMethod === 'OUT' ? (
              <RadioGroup>
                <Radio value="CHOUQIAN">抽签</Radio>
                <Radio value="B_CROSS">大交叉</Radio>
                <Radio value="S_CROSS">小交叉</Radio>
              </RadioGroup>
            ) : (
              <RadioGroup>
                <Radio value="CHOUQIAN">抽签</Radio>
              </RadioGroup>
            )
          )}
        </FormItem>
        {form.getFieldDecorator('zubieCode', {
          rules: [{ required: true }],
          initialValue: curData ? curData.zubieCode : zubieCode,
        })(<Input type="hidden" />)}
        {form.getFieldDecorator('id', {
          rules: [{ required: false }],
          initialValue: curData && curData.id,
        })(<Input readOnly type="hidden" />)}
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="比赛局数">
          {form.getFieldDecorator('gameNum', {
            rules: [{ required: true, message: '请输入局数' }],
            initialValue: curData && '' + curData.gameNum,
          })(
            <RadioGroup disabled={curData && curData.zubieStatus !== 'NEW'}>
              <Radio value="1">一局</Radio>
              <Radio value="3">三局两胜</Radio>
              <Radio value="5">五局三胜</Radio>
            </RadioGroup>
          )}
        </FormItem>

        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分制">
          {form.getFieldDecorator('gameWinScore', {
            rules: [{ required: true, message: '请输入分制' }],
            initialValue: curData && '' + curData.gameWinScore,
          })(
            <RadioGroup>
              <Radio value="31">31分</Radio>
              <Radio value="21">21分</Radio>
              <Radio value="15">15分</Radio>
              <Radio value="11">11分</Radio>
            </RadioGroup>
          )}
          {/* {form.getFieldDecorator('maxScore', {
                        initialValue: curData && curData.maxScore,
                    })(<InputNumber style={{ width: 80 }} max={35} />)} */}
        </FormItem>
        {this.state.gameMethod === 'FENZU' && this.showCycleWin()}
        {this.state.gameMethod !== 'FENZU' && this.showOtherWin()}
      </Modal>
    );
  }
}
